import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:uikit/uikit.dart';

import '../../view_model/poi_search_cell_view_model.dart';

class ShareDestPopViewModel extends ViewModel {
  var selectedIndex = (-1).obs;
}

class ShareDestPopWidget extends StatelessWidget {
  final POISearchCellViewModel poi;
  final ValueChanged<POISearchCellViewModel> clickCallback;

  ShareDestPopWidget({Key? key, required this.poi, required this.clickCallback}) : super(key: key);

  final viewModel = bindVM(ShareDestPopViewModel());

  @override
  Widget build(BuildContext context) {
    var rate = MediaQuery.of(context).size.width / 375.0;
    var contentHeight = poiHeight();
    return Container(
      decoration: const BoxDecoration(
        borderRadius:  BorderRadius.only(
          topLeft: Radius.circular(24),
          topRight: Radius.circular(24),
        ),
      ),
      height: rate * (96 + contentHeight) + MediaQuery.of(context).padding.bottom,
      child: Stack(
        children: [
          SizedBox(
            width: MediaQuery.of(context).size.width,
              height: rate * 190,
              child: T3Image.t3assets(T3AssetsName.icon_share_dest_share_bg, fit: BoxFit.cover),
          ),
          Positioned(
            right: 16,
            top: 16,
            child: T3GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
              },
              child: SizedBox(
                  width: 24,
                  height: 24,
                  child: T3Image.t3assets(T3AssetsName.icon_share_dest_share_close)
              ),
            ),
          ),
          const Positioned(
            left: 20,
            top: 24,
            child: Text(
                '分享地址',
              style: TextStyle(
                color: LucyColors.lucy_02102A,
                fontSize: 22,
                fontWeight: LucyFonts.semi_bold,
              ),
            ),
          ),
          const Positioned(
            left: 20,
            top: 58,
            child: Text(
              '为好友预填终点，邀请好友一键打车',
              style: TextStyle(
                color: LucyColors.lucy_02102A,
                fontSize: 12,
                fontWeight: LucyFonts.regular,
              ),
            ),
          ),
          Positioned(
            top: 96 * rate,
            left: 0,
            child: Container(
              width: MediaQuery.of(context).size.width,
              decoration: const BoxDecoration(
                borderRadius: BorderRadius.only(
                topLeft: Radius.circular(24),
                topRight: Radius.circular(24),
                ),
                color: Colors.white,
              ),
              height: contentHeight * rate + MediaQuery.of(context).padding.bottom,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(height: 28 * rate,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      T3Image.t3assets(T3AssetsName.icon_share_dest_location),
                      const SizedBox(width: 2,),
                      Text(
                        poi.poiName,
                        style: const TextStyle(
                          color: LucyColors.lucy_02102A,
                          fontWeight: LucyFonts.semi_bold,
                          fontSize: 20
                        ),
                      ),
                    ],
                  ),
                  if ((poi.subPOIs).isNotEmpty)
                    ...[
                      SizedBox(height: 16 * rate,),
                      SizedBox(
                        height: subPoiHeight() * rate,
                        child: _buildSubPOIs(context),
                      ),
                    ],
                  SizedBox(height: 36 * rate,),
                  T3GestureDetector(
                    onTap: share,
                    child: Container(
                      width: MediaQuery.of(context).size.width - 48,
                      height: 52 * rate,
                      decoration: const BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(26)),
                        color: LucyColors.lucy_00AD59,
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          T3Image.t3assets(T3AssetsName.wechat_login_icon),
                          const SizedBox(width: 8,),
                          const Text(
                            "分享给微信好友",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: LucyFonts.semi_bold,
                                fontSize: 16
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  share() {
    if (viewModel.selectedIndex.value != -1) {
      poi.shareSubPOIIndex = viewModel.selectedIndex.value;
    }
    clickCallback(poi);
    BoostNavigator.instance.pop();
  }

  double poiHeight() {
    if (poi.subPOIs.isNotEmpty) {
      var count = poi.subPOIs.length;
      var lines = count / 2;
      if (count % 2 != 0) {
        lines = (count + 1) / 2;
      }
      var height = 16 + (36 * lines) + (lines - 1) * 8;
      return height + 168.0;
    }
    return 168.0;
  }

  double subPoiHeight() {
    if (poi.subPOIs.isNotEmpty) {
      int count = min(6, poi.subPOIs.length);
      var lines = count / 2;
      if (count % 2 != 0) {
        lines = (count + 1) / 2;
      }
      var height = (38 * lines) + (lines - 1) * 8;
      return height;
    }
    return 0;
  }

  _buildSubPOIs(BuildContext context) {
    var rate = MediaQuery.of(context).size.width / 375.0;
    var radio = ((MediaQuery.of(context).size.width - 48 - 8) / 2) / 36;
    var pois = poi.subPOIs;
    if (pois.length > 6) {
      pois = pois.sublist(0, 6);
    }
    return Padding(
      padding: const EdgeInsets.only(left: 16.0, right: 16),
      child: GridView.builder(
          padding: EdgeInsets.zero,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
              childAspectRatio: radio
          ),
          itemCount: pois.length,
          itemBuilder: (context, index) {
            return T3GestureDetector(
              onTap: () {
                viewModel.selectedIndex.value = index;
              },
              child: Obx(() {
                var isSelected = (index == viewModel.selectedIndex.value);
                return Container(
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      border: Border.all(
                          width: 0.5,
                          color: isSelected ? LucyColors.lucy_00AD59 : const Color(0xFFB7BECC)
                      ),
                      borderRadius: const BorderRadius.all(Radius.circular(8))
                  ),
                  height: (36.0 * rate),
                  child: Text(
                    pois[index].sname!,
                    style: TextStyle(
                        fontSize: 12,
                        fontWeight: isSelected ? LucyFonts.semi_bold : LucyFonts.regular,
                        color: isSelected ? LucyColors.lucy_00AD59 : LucyColors.lucy_02102A
                    ),
                  ),
                );
              }),
            );
          }),
    );
  }
}
